<template lang="pug">
.view-header
  router-link.breadcrumb-item(:to="{ name: 'index' }")
    .iconfont.icon-home-1
  .breadcrumb-item(v-for="item in breadcrumb" v-if="item.title")
    span.header-label.el-icon-arrow-right
    router-link.header-title(:to="{ name: item.router }") {{item.title}}
</template>
<script>
export default {
  name: 'viewHeader',
  computed: {
    breadcrumb () {
      let breadcrumb = []
      this.$route.matched.forEach(item => {
        if (item.name === this.$route.name) {
          if (this.$route.meta && this.$route.meta.type && this.$route.meta.type === 'edit') {
            if (this.$route.params.id) {
              breadcrumb.push({ title: `编辑${item.meta.title}`, router: item.name })
            } else {
              breadcrumb.push({ title: `添加${item.meta.title}`, router: item.name })
            }
          } else {
            breadcrumb.push({ title: item.meta.title, router: item.name })
          }
        } else {
          breadcrumb.push({ title: item.meta.title, router: item.name })
        }
      })
      return breadcrumb
    }
  },
  props: {},
  methods: {
    cloneLoop (x) {
      const root = {};
      // 栈
      const loopList = [
        {
          parent: root,
          key: undefined,
          data: x,
        }
      ];
  
      while(loopList.length) {
        // 深度优先
        const node = loopList.pop();
        const parent = node.parent;
        const key = node.key;
        const data = node.data;

        // 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素
        let res = parent
        if (typeof key !== 'undefined') {
          res = parent[key] = {};
        }

        for(let k in data) {
          if (data.hasOwnProperty(k)) {
            if (typeof data[k] === 'object') {
              // 下一次循环
              loopList.push({
                parent: res,
                key: k,
                data: data[k],
              })
            } else {
              res[k] = data[k];
            }
          }
        }
      }
      return root;
    }
  }
}
</script>
<style lang="scss" scoped>
.view-header {
  padding: 10px 0px;
  display: flex;
  align-items: center;
}
.breadcrumb-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 20px;
  color: #8B8EAB;
  .iconfont {
    font-size: 24px;
  }
}
.header-label {
  margin: 0 10px;
}
.header-title.router-link-exact-active,
.header-title.router-link-active{
  color: #B2B4C7;
}
</style>
